import React from 'react'
import { Card, Icon, Popconfirm, Tag } from 'antd'
import { Link } from 'react-router-dom'
import getStatusColor from '../../constant/subscription-status'
const {Meta} = Card

const VideoBox = ({video, needManagement, deleteVideo, preview, remove, removeVideoFromSerial, serialId, subscribed}) => {
  const status = video.isPublic ? '公开' : '需订阅'
  return <Card className='video-card'
    actions={needManagement ? [
      <Icon type='eye' onClick={() => preview(video)} />,
      <Link to={`/serials-management/videos/${video.id}/editor`}>
        <Icon type='edit' />
      </Link>,
      <Popconfirm
        title='确定删除？'
        onConfirm={() => deleteVideo(video.id)}
        okText='确定'
        cancelText='取消'>
        <Icon style={{color: 'red'}} type='delete' />
      </Popconfirm>
    ] : []}
    cover={
      <Link to={`/videos/${video.id}`}>
        <div style={{height: '150', overflow: 'hidden'}}>
          {
            subscribed
              ? ''
            : <Tag color={getStatusColor(status)} className='status-tag'>
              {status}
            </Tag>
          }
          <img alt='图片链接失效' className='cover-image' src={video.coverUrl} width='100%' />
        </div>
      </Link>
    }
  >
    <Meta title={<b>{video.title}</b>}
      description={
        <span><Icon type='solution' /> {video.username}
          {
            remove
              ? <Popconfirm
                title='确定删除？'
                onConfirm={() => removeVideoFromSerial(serialId, video.id)}
                okText='确定'
                cancelText='取消'>
                <Tag className='remove-tag'
                  color='red' key={video.id}>
                  移除
                </Tag>
              </Popconfirm>
              : ''
          }
        </span>
      } />
  </Card>
}

export default VideoBox
